<template>
  <div class="row">
    <div class="col-12 pt-3">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">编号</th>
            <th scope="col">科目</th>
            <th scope="col">成绩</th>
            <th scope="col">考试时间</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="item.id">
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ item.subject }}</td>
            <td>{{ item.score }}</td>
            <td>{{ item.time }}</td>
            <td>
              <!-- 1. 子传父:  $emit发送事件, 传参index -->
              <button
                type="button"
                class="btn btn-link"
                @click="$emit('delByIndex', index)"
              >
                删除
              </button>
            </td>
          </tr>

          <tr class="bg-light">
            <th scope="row">统计</th>
            <td colspan="2">总分：0</td>
            <td colspan="2">平均分：0</td>
          </tr>
        </tbody>
        <tfoot style="display: none">
          <tr>
            <td class="text-center" colspan="5">暂无数据</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
};
</script>

<style></style>
